<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <script>

// -------------------------------------------------------------------------------
// --- Creates cell content to better see the spanned cells ---
Grids.OnLoaded = function(G){
function update(row){
   for(var r=row.firstChild,i=1;r;r=r.nextSibling,i++) {
      r.id = (i<10?"0":"")+i;
      if(r.parentNode.id) r.id = r.parentNode.id+"-"+r.id;
      for(var c in G.Cols) if(c!="Panel") { r[c] = c=="X" ? r.id : r.id+" "+c; }
      r.Y = a++; if(a>8) a = 1;
      if(r.firstChild) update(r);
      }
   }
a = 1;
update(G.Body.firstChild); // First page   
}
// -------------------------------------------------------------------------------
   </script>

  <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }

      .Tutorial .Desc { margin-top:10px; padding:10px; border:1px solid #dfdfdf; }
      .Tutorial .Brown { color:#D73938; }

   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>11. Dynamic column and row spanning</h1>
   <h2>Let users to span and split cells by mouse dragging</h2>

   <ul style="margin-left:-15px;">
   <div class="Desc">
      Select cell ranges by <b>mouse dragging</b> and <b>right click</b> to <b class="Brown">span</b> the range. 
      Press mouse <b>middle button</b> to <b class="Brown">split</b> the cell under mouse.
      You can select and <b class="Brown">span</b> cells directly by dragging by <b>right mouse</b> button.
      You can <b class="Brown">span</b> and <b class="Brown">split</b> selected cells also by clicking to toolbar buttons Split and Join.
      <br />
      <i>You can <b>span</b> rows also on different tree levels. When spanned parent row through its children, the children are always spanned all.</i><br />
      You can test here <b>deleting spanned rows</b>, <b>adding rows</b> to spanned range, <b>moving rows</b> between, into and out the spanned ranges (by mouse dragging with Ctrl key held).
      <b>Hiding</b>, <b>showing</b> and <b>moving columns</b> with spanned cells.
      Also <b>sorting</b>, <b>filtering</b> and <b>grouping</b> the spanned rows.
      And finally <b>editing</b> in the spanned cells.      
   </div>
   </ul>
   <br />

   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='11-Dynamic_Span.xml'>11-Dynamic_Span.xml</a></div>
      <div class="Main" style='width:100%; height:631px;'>
         <bdo Debug='check' Data_Url='11-Dynamic_Span.xml' Upload_Flags='Spanned'></bdo>
      </div>
   </center>

   <ul>
      <li>
         Set &lt;Cfg <h3>DynamicSpan</h3><b>='1'</b> to prepare TreeGrid for dynamic cell spanning.
         It shows the Split and Join buttons on Toolbar and saves changes in span to Undo if permitted.
      </li>
      <li>
         Set &lt;Cfg <h3>SelectingCells</h3><b>='1'</b> to permit selection of individual cells and cell ranges.
      </li>
      <li>
         Set &lt;Actions <b>OnDragCell="SelectCells"</b> to select cells by mouse dragging.<br />
         If you want to still support dragging and moving rows, you can permit it for example with Ctrl key held, by &lt;Actions OnCtrlDragCell="DragRow"/>.
      </li>
      <li>
         Attach actions <b>SpanSelected</b>, <b>SplitSelected</b> and <b>SplitCell</b> to appropriate events like <b>OnDropCell</b>, <b>OnClickCell</b>, <b>OnMouseDown</b>, <b>OnRightClick</b> and so on to previde given behavior.
      </li>
      <li>
         To clear selection after some action, add <b>ClearSelection</b> action, 
         for example &lt;Actions OnClickCell="ClearSelection,FocusEdit" OnClickOutside="ClearSelection,Blur"/> clears the selection after any focus change.
      </li>
      <li>
         <h4>API</h4> &nbsp;You can dynamically span and split the cells by API methods <b>SpanRange</b> and <b>SplitSpanned</b>.
      </li>
      <li>
         <h4>Upload span changes</h4> 
         <ul>
            <li>
               By &lt;bdo <b>Upload_Type</b> with <b>Span</b> keyword you can upload only spanned rows, with appropriate RowSpan and Span attributes, in special &lt;Spanned> tag.
            </li>
            <li>
               By &lt;bdo <b>Upload_Flags</b> with <b>Spanned</b> keyword and <b>Upload_Type</b> with <b>Changes</b> keyword will upload the changes in span along with other changes in grid, in &lt;Changes> tag.
            </li>
         </ul>
      </li>
      <li>
         <i>IE8 strict mode has problems with rowSpan HTML attribute, so when using RowSpan switch IE8 to quirks mode (no !DOCTYPE) or to IE7 compatibility mode.</i>
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialCells\s*=\s*(\d+)/), TGIndex = 1024;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridCells11", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialCells="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>